<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }
      .avatar-uploader .el-upload:hover {
        border-color: #409eff;
      }
      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
      }
      .avatar {
        width: 178px;
        height: 178px;
        display: block;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 
            el-upload
              action:上传文件的接口地址
              name:上传文件对应参数   name="image" 
              show-file-list：是否显示已上传文件列表
              before-upload：上传前的回调函数  function(file){  file.size文件大小  file.type:文件类型, return boolean值， true:正常执行上传  false:中止上传}
              on-success 上传成功回调函数  function (res,file){
                   res:接口返回值   file.response:接口返回值  file.raw:上传的文件file对象
              }
         -->
      <el-upload
        class="avatar-uploader"
        action="http://127.0.0.1/heimamm/public/uploads"
        name="image"
        :show-file-list="false"
        :before-upload="beforeAvatarUpload"
        :on-success="handleAvatarSuccess"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div>
    <script src="./vue.js"></script>
    <link rel="stylesheet" href="./element.css" />
    <script src="./ele.js"></script>
    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            imageUrl: "",
          };
        },
        methods: {
          handleAvatarSuccess(res, file) {
            //   res:接口返回值   file.response:接口返回值  file.raw:上传的文件file对象
            window.console.log("上传成功：", res);
            window.console.log(file);
            this.imageUrl =
              "http://127.0.0.1/heimamm/public" + "/" + res.data.file_path;
            // this.imageUrl = URL.createObjectURL(file.raw);
          },
          beforeAvatarUpload(file) {
            window.console.log(file);
            const isJPG =
              file.type === "image/jpeg" || file.type === "image/png";
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
              this.$message.error("上传头像图片只能是 JPG,PNG 格式!");
            }
            if (!isLt2M) {
              this.$message.error("上传头像图片大小不能超过 2MB!");
            }
            return isJPG && isLt2M;
          },
        },
      });
    </script>
  </body>
</html>
